import { Row, Col } from 'antd'
import { connect } from 'dva';
import {Layout, Menu, Icon, Switch, Button } from 'antd'
import Bread from '../components/Bread'
import styles from './app.less'
import Menus from '../components/Menus'
const { Header, Footer, Sider, Content } = Layout;



function App ({children,app,dispatch}) {
  const {theme, siderFold} = app;//获取主题及是否折叠侧边栏
  //切换主题
  function changeTheme() {
    dispatch({
      type: 'app/save',
      payload: {theme: theme==='dark' ? 'light' : 'dark'}
    });
  }
  //注销处理
  function logout() {
    dispatch({
      type: 'app/logout'
    });
  }
  //收起侧边栏
  function onCollapse(collapsed){
    dispatch({
      type:'app/save',
      payload:{ siderFold:! siderFold}
      // payload:{sideCollapse:collapsed}
    })
  }

  //获取menu
  const menu = JSON.parse(localStorage.getItem('menu'))
  return (
    <Layout className = {styles.layout}>
      <Sider
        style = {{
          height: '100vh',
          background : theme ==='dark' ? '#404040'  : '#FFFFFF',
          overflow:'visible',
        }}
        width={ 220 }
        collapsed={ siderFold}
        trigger={null}
        onCollapse={onCollapse}
        collapsible
      >
        <div style = {{
          overflow:siderFold ? 'visible' : 'auto',
          height:'calc(100vh - 42px)'
          }}
        >
          <div className={styles.logo}>
            <img src={siderFold ? require('../assets/logo1.png') :require('../assets/logo5.png')} />
          </div>
          <Menus
            menu={menu}
            siderFold={ siderFold}
            theme={theme}

          />
        </div>

        <div className = {styles.switchForm} style={{  background:theme === 'dark' ? '#494949' : '#FCFCFC',}}>
          <Switch
            style={{
              position:'absolute',
              right:'10px',

            }}
            checked={theme === 'dark'}
            onChange={changeTheme}
            checkedChildren="白"
            unCheckedChildren="黑">
          </Switch>

        </div>
      </Sider>
      <Layout className={styles.main}>
        <Header className = {styles.header}>
          <Icon
            type={ siderFold ? 'menu-unfold' : 'menu-fold'}
            onClick={onCollapse}
            className={styles.siderFold}
          />
          <div className = {styles.bread} >
            <Bread menu={menu}/>
          </div>
          <Menu mode="horizontal" onClick={logout} className = {styles.logout}>
            <Menu.SubMenu  title={< span > <Icon type="user" />
                admin
             < /span>}
            >
            <Menu.Item key="logout">
              <span><Icon type="poweroff" />注销</span>
            </Menu.Item>
            </Menu.SubMenu>
          </Menu>
        </Header>
        <Content className = {styles.content} >

          {children}
        </Content>
      </Layout>


    </Layout>
  )
}

export default connect (({app})=>({app}))(App);
